<!--回弹检测结果管控——1 -->
<template>
  <div class="department">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
        <div>
          <el-checkbox v-model="checked" @change="see()">查看下级</el-checkbox>
        </div>
      </div>
      <tree
        :treeData="treeData"
        :checkData="checkData"
        name="engineerList"
        nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick"
        :defaultProps="defaultProps"
      >
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 部门信息 -->
      <div class="department_right_name">
        <div>
          {{ name }}
        </div>
      </div>

      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left">
          <div class="mechanism_nav_left">
            <input
              type="text"
              placeholder="请输入关键字"
              v-model="getList.keyWord"
            />
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="getDataList(getList)"
              >查询</el-button
            >

            <el-select
              @change="function (v) {
                  return selectJudgetype(v);
                }
              "
              v-model="getList.keyType"
              placeholder="请选择检测类型"
            >
              <el-option
                v-for="v in Checktype"
                :key="v.fItemName"
                :label="v.fItemName"
                :value="v"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="print">
          <div class="printTable">
            <!--  -->
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="small"
              @click="getDataList(getList)"
            >
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              v-if="yj_view"
              size="small"
              @click="getDetail(equipmentDetailId)"
              >查看
            </el-button>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table">
        <el-table
          ref="multipleTableA"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          @row-click="getRowInfo"
          :data="tableData"
          style="width: 100%"
          :height="navigatepageNums > 1 ? 'calc(100% - 50px)' : '100%'"
          stripe
          border
          highlight-current-row
          @current-change="rowChange"
        >
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="50"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="fProjectname" label="建设项目简称" width="180">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fProjectname">{{
                  scope.row.fProjectname
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fCompanyname"
            label="施工/委托单位"
            width="115"
            align="left"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fCompanyname">{{
                  scope.row.fCompanyname
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fSamplingno"
            label="样品编号"
            width="210"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="openDialog(scope.row)"
                @cell-dblclick="openDialog"
                type="text"
                size="small"
              >
                {{ scope.row.fSamplingno }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="fProjecttypename"
            label="工程部位/用途"
            width="150"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fProjecttypename">{{
                  scope.row.fProjecttypename
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fConcretelevel"
            label="强度等级"
            align="center"
            width="69"
          >
          </el-table-column>
          <el-table-column
            prop="fSpecimenage"
            label="龄期(天)"
            align="center"
            width="68"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fSpecimenage">{{
                  scope.row.fSpecimenage
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fConcreteresult"
            label="强度测定值(MPa)"
            align="center"
            width="115"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fConcreteresult">{{
                  scope.row.fConcreteresult
                }}</a>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="fTestnum"
            label="达到设计强度(%)"
            align="center"
            width="125"
          >
          </el-table-column>
          <el-table-column
            prop="fIstrue"
            label="是否合格"
            width="70"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fTestdates"
            label="试验日期"
            width="88"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fIsconcrete"
            label="是否回弹检测"
            width="95"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="fChecktype" label="检测类型" width="95">
          </el-table-column>
          <el-table-column
            prop="fLeadercompanyname"
            label="检测单位"
            width="105"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fLeadercompanyname">{{
                  scope.row.fLeadercompanyname
                }}</a>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="fReportdates"
            label="回弹时间"
            width="90"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fTestresult"
            label="回弹检测结果"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fCreateusername"
            label="记录人"
            width="70"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fPhotofilelists"
            label="记录表"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <div style="display: flex; height: 100%; align-items: center">
                <div
                  v-for="(v, index) in scope.row.fPhotofilelists"
                  @click="openPdfs1(v)"
                  :key="index"
                  style="margin: 2px 3px; display: flex; align-items: center"
                >
                  <img
                    style="
                      max-width: 100%;
                      max-height: 100%;
                      width: 18px;
                      height: 20px;
                    "
                    src="@/assets/img/pdf.png"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fSourcefilelists"
            label="检测报告"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <div style="display: flex; height: 100%; align-items: center">
                <div
                  v-for="(v, index) in scope.row.fSourcefilelists"
                  @click="openPdfs1(v)"
                  :key="index"
                  style="
                    margin: 2px 3px;
                    display: flex;
                    align-items: center;
                    flex-shrink: 0;
                  "
                >
                  <img
                    style="
                      max-width: 100%;
                      max-height: 100%;
                      width: 18px;
                      height: 20px;
                    "
                    src="@/assets/img/pdf.png"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fStatus"
            label="信息状态"
            width="70"
            align="center"
          >
          </el-table-column>
          <template slot="empty">
            <img
              style="width: 285px; height: 208px"
              src="@/assets/img/undata.png"
              alt=""
            />
            <div class="pageFlagText">暂时没有数据哦！</div>
          </template>
        </el-table>
        <div class="block" v-if="navigatepageNums > 1">
          <!--  -->
          <div class="paginationInfo">
            检索到{{ queryCriteriaData.total }} 条记录 | 显示第
            <span v-if="getList.page == 1">{{ getList.page }}</span
            ><span v-else>{{ 20 * (getList.page - 1) }}</span> -
            <!-- {{ 20 * getList.page }} 条记录 -->

            <span v-if="queryCriteriaData.pages == queryCriteriaData.lastPage">
              {{ queryCriteriaData.total }}</span
            >
            <span v-else> {{ 20 * getList.page }} </span>
            条记录
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="getList.page"
            :page-size="getList.pageSize"
            layout="prev, pager, next, jumper"
            :total="queryCriteriaData.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 查看弹框 -->
    <!-- 按检测记录新增/编辑 -->
    <!-- 检测记录列表 -->
    <div class="fvisible">
      <el-dialog
        :close-on-click-modal="false"
        :title="dialogText"
        v-dialogDrag
        :visible.sync="dialogTableVisible"
        v-loading="loadingDialog"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <div class="" :style="{ height: dialogHeightSample }">
          <el-form :model="formData" ref="formData">
            <div style="display: flex; width: 100%; margin-top: 15px">
              <el-form-item
                label="检测类型"
                prop="fChecktype"
                :label-width="formLabelWidth"
              >
                <el-input
                  disabled
                  v-model="formData.fChecktype"
                  autocomplete="off"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="检测单位"
                prop="fLeadercompanyname"
                :label-width="formLabelWidth"
              >
                <el-input
                  disabled
                  v-model="formData.fLeadercompanyname"
                  autocomplete="off"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
            </div>
            <div style="display: flex; width: 100%">
              <el-form-item label="工程部位/用途" :label-width="formLabelWidth">
                <el-input
                  disabled
                  v-model="formData.fProjecttypename"
                  autocomplete="off"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="是否进行回弹检测"
                prop="fIsconcrete"
                :label-width="formLabelWidth"
              >
                <el-input
                  disabled
                  v-model="formData.fIsconcrete"
                  autocomplete="off"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
            </div>

            <div style="display: flex; width: 100%">
              <el-form-item label="回弹检测时间" :label-width="formLabelWidth">
                <el-input
                  disabled
                  v-model="formData.fReportdates"
                  autocomplete="off"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>

              <el-form-item label="回弹检测结果" :label-width="formLabelWidth">
                <el-input
                  disabled
                  v-model="formData.fTestresult"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>

            <div style="display: flex; width: 100%">
              <el-form-item label="检测情况概述" :label-width="formLabelWidth">
                <el-input
                  disabled
                  v-model="formData.fNote"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <!--   -->
              <el-form-item label="记录人" :label-width="formLabelWidth">
                <el-input
                  disabled
                  v-model="formData.fCreateusername"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>
            <div style="display: flex; width: 100%">
              <!--   -->
              <el-form-item
                label="回弹记录表"
                :label-width="formLabelWidth"
                class="enclosure"
                style="height: 100%"
              >
                <el-input
                  v-show="false"
                  v-model="formData.fCreateusername"
                  autocomplete="off"
                >
                </el-input>
                <div
                  ref="fPhotofilelist"
                  style="
                    height: 25px;
                    line-height: 25px;
                    width: 100%;
                    display: flex;
                    border: 1px solid #d1d7e2;
                    border-radius: 5px;
                    margin: 8px 0 2px 0;
                  "
                >
                  <div
                    v-for="(item, i) in fPhotofilelist"
                    :key="i"
                    style="margin: 2px 3px; height: 87%"
                    @click="openPdfs(item)"
                  >
                    <img
                      style="max-width: 100%; max-height: 100%"
                      src="@/assets/img/pdf.png"
                    />
                  </div>
                </div>
              </el-form-item>
              <!--   -->
              <el-form-item
                label="回弹检测报告"
                :label-width="formLabelWidth"
                class="enclosure"
                style="height: 100%"
              >
                <el-input
                  v-show="false"
                  v-model="formData.fCreateusername"
                  autocomplete="off"
                >
                </el-input>
                <div
                  ref="fSourcefilelist"
                  style="
                    height: 25px;
                    line-height: 25px;
                    width: 100%;
                    display: flex;
                    border: 1px solid #d1d7e2;
                    border-radius: 5px;
                    margin: 8px 0 2px 0;
                  "
                >
                  <div
                    v-for="(v, i) in fSourcefilelist"
                    :key="i"
                    style="
                      margin: 2px 3px;
                      height: 87%;
                      display: flex;
                      align-items: center;
                      flex-shrink: 0;
                    "
                    @click="openPdfs(v)"
                  >
                    <img
                      style="max-width: 100%; max-height: 100%"
                      src="@/assets/img/pdf.png"
                    />
                    <!-- <img
                        src="@/assets/img/enclosure/imgs.png"
                        alt=""
                        style="height: 90%"
                                                              /> -->
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <div class="Control-2">
      <el-dialog :title="fFileName" v-dialogDrag :visible.sync="dialogPdf">
        <div :style="{ height: dialogHeights }">
          <iframe
            :src="pdfUrl"
            width="100%"
            height="100%"
            frameborder="0"
          ></iframe>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import tree from "@/components/public/common-trees";

import {
  getUserCompanyTreeList,
  // getConcreteChecksampleByFid,
  getConcreteCheckTestPageList, //// 回弹检测结果管控-3列表
  // getCheckTypeByUserList,//检测类型
  getConcreteCheckTestByFid,
} from "@/api/request.js";
export default {
  name: "Home",
  inject: ["reload"],
  data() {
    return {
      names: "Control-3",
      yj_view: null,
      dialogPdf: false,
      fFileName: "",
      pdfUrl: "",
      fPhotofilelist: [], //检测记录表文件集合
      fSourcefilelist: [], //强度检测报告文件集合
      dialogTableVisibled: false,
      widthTab: "55",
      widthTab1: "77",
      Checktype: [
        {
          fItemName: "==请选择==",
          fItemValue: "==请选择==",
        },
        {
          fItemName: "施工单位自检",
          fItemValue: "施工单位自检",
        },
        {
          fItemName: "监理单位抽检",
          fItemValue: "监理单位抽检",
        },
        {
          fItemName: "中试单位抽检",
          fItemValue: "中试单位抽检",
        },
      ], //检测类型 - 根据当前登录用户获取检测类型
      fEquipmentname: [], //已选主要仪器设备
      dialogHeights: null,
      dialogText: "",
      // 列表
      getList: {
        modelType: "2", // 0代办 1已办  2查询页面
        fCompanyid: null, //机构id
        fUserid: null, //当前登录用户id
        sublevel: "1", //查看下级  1是0否
        keyType: "", //检测类型
        keyWord: "", //样品编号模糊查询字段
        page: 1, //页码
        pageSize: 20, //每页条数
      },
      equipmentDetailId: null, //列表页id
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {},
      formData: {},
      sample: "",

      value: "",

      currentPage4: 4,
      checked: true, //查看下级
      name: "未选择公司",
      dialogHeight: "",
      activeIndex: "1",
      tableWidth: "35",
      tableWidth1: "55",
      expandedKeys: null,
      fId: null, //当前数据fId
      projectName: null, //项目名称
      loading: false,

      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogHeightSample: "",

      formLabelWidth: "110px",
      treeData: [],

      tableDatas: [],
      tableData: [],
      // 左侧机构树
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      dialogVisible: false,
      companyId: null,
      loadingDialog: false,
      currentRowId: "",
      treelength: false,
      treeText: {
        companyId: null,
        userId: null,
      },
      highlightBd: true, //左侧机构树停留背景色
      checkData: [],
    };
  },
  components: {
    tree, //左侧组织机构数
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("yjSmart-userInfo"));
    this.getList.fUserid = this.userInfo.userId;
    if (JSON.parse(sessionStorage.getItem("yjSmart-engineerList"))) {
      var id = JSON.parse(sessionStorage.getItem("yjSmart-engineerList"));
      this.checkData = [id.fCompanyid];
    }

    this.getHeight();
    this.getTree();
    this.btnRole(this.names);
  },
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("yjSmart-ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });
        this.yj_view = btnStr.includes("yj_view");
      } else {
        this.yj_view = true;
      }
    },
    openPdf(url, name) {
      this.dialogPdf = true;
      this.pdfUrl = url;
      this.fFileName = name;
    },
    openPdfs1(v) {
      this.dialogPdf = true;
      this.pdfUrl = v.url;
      this.fFileName = v.fFileName;
    },

    openDialogs() {},
    // 新增/编辑
    edit() {
      // 编辑
      if (this.equipmentDetailId != null && this.equipmentDetailId != "") {
        this.formData.fId = this.equipmentDetailId;

        this.dialogTableVisible = true;
        this.loadingDialog = true;
        this.recordData = [];
        this.recordData1 = [];

        getConcreteCheckTestByFid({ fId: this.equipmentDetailId })
          .then((res) => {
            if (res.errcode == 0) {
              this.loadingDialog = false;
              this.formData = res.data.lrCheckConcretetest;
              this.fPhotofilelist = res.data.fPhotofilelist; //检测记录表文件集合
              this.fSourcefilelist = res.data.fSourcefilelist; //强度检测报告文件集合
            } else {
              this.$message.error("编辑", res.msg);
              this.loadingDialog = false;
            }
          })
          .catch(() => {
            console.log("编辑");
            this.loadingDialog = false;
          });
      } else {
        return this.$message.error("请先选择需要编辑的数据");
      }
    },
    // 页面切换
    handleSizeChange(val) {
      return val;
    },
    handleCurrentChange(val) {
      this.getList.page = val;
      this.getDataList(this.getList);
    },
    // 检测类型
    selectJudgetype(e) {
      if (e.fItemName == "==请选择==") {
        this.getList.keyType = "";
      } else {
        this.getList.keyType = e.fItemName;
      }

      this.getDataList(this.getList);
    },
    openPdfs(v) {
      this.dialogPdf = true;
      this.pdfUrl = v.url;
      this.fFileName = v.name;
    },
    //查看下级
    see() {
      if (this.checked == true) {
        this.getList.sublevel = 1;
      } else {
        this.getList.sublevel = 0;
      }
      this.getDataList(this.getList);
    },
    // 点击当前行变色
    rowChange(val) {
      this.currentRow = val;
    },
    getDetail() {
      if (this.equipmentDetailId != null && this.equipmentDetailId != "") {
        this.edit(1);
      } else {
        return this.$message.error("请先选择需要编辑的数据");
      }
    },

    // 左侧树结构
    getTree() {
      this.treeText.companyId = this.userInfo.companyId;
      this.treeText.userId = this.userInfo.userId;
      getUserCompanyTreeList(this.treeText)
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.userCompanyTreeList;
            this.treeData = this.commonJs.tranListToTreeData(companyTree);

            if (this.treeData[0].children == undefined) {
              this.treelength = false;
            } else {
              this.treelength = true;
            }

            if (this.checkData[0]) {
              //
              this.name = JSON.parse(
                sessionStorage.getItem("yjSmart-engineerList")
              ).fShortname;

              this.getList.fCompanyid = this.checkData[0];
              this.companyId = this.checkData[0];
            } else {
              this.name = this.treeData[0].fShortname; //当前点击组织机构名称
              this.getList.fCompanyid = this.treeData[0].fCompanyid; //当前点击组织机构ID
              this.companyId = this.treeData[0].fCompanyid; //当前点击组织机构ID
              this.checkData[0] = this.treeData[0].fCompanyid;
            }
            this.getDataList(this.getList);
            // 列表
          } else {
            this.$message.error("获取组织机构失败", res.msg);
            return false;
          }
        })
        .catch(() => {
          console.log("获取组织机构失败");
          return false;
        });
    },

    // 获取列表数据
    getDataList(data) {
      this.loading = true;
      var that = this;
      getConcreteCheckTestPageList(data)
        .then((res) => {
          if (res.errcode == 0) {
            that.loading = false;
            that.tableData = res.data.checkConcreteList.list;
            this.queryCriteriaData = res.data.checkConcreteList;
            this.navigatepageNums =
              this.queryCriteriaData.navigatepageNums.length;
            // setTimeout(() => {
            //   that.$nextTick(() => {
            //     that.$refs.multipleTable.doLayout();
            //   });
            // }, 200);
          } else {
            this.$message.error("列表", res.msg);
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("列表获取失败");
          this.loading = false;
        });
    },

    // 点击当前行
    getRowInfo(e) {
      this.equipmentDetailId = e.fId;
    },
    rowStyle({ row }) {
      if (this.currentRowId === row.F_Id) {
        return {
          "background-color": "rgb(94, 180, 251) !important",
          color: "rgb(255, 255, 255) !important",
        };
      }
    },

    // 打印表
    printFile(num) {
      if (this.fId != null && this.fId != "") {
        if (num == 0) {
          window.open(
            this.$url + "App/upload/getExcelByConcreteSample.do?fId=" + this.fId
          );
        } else if (num == 1) {
          window.open(
            this.$url +
              "App/upload/getExcelByConcreteSampleCode.do?fId=" +
              this.fId
          );
        }
      } else {
        this.$message({
          message: "您没有选中任何数据项,请选中后再操作！",
          type: "warning",
        });
      }
    },

    // 获取页面容器高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度
      this.dialogHeight = h * 0.75 + "px";
      this.dialogHeights = h * 0.888 + "px";
      this.dialogHeightSample = h * 0.4 + "px";
    },
    handleNodeClick(data) {
      this.name = data.fShortname;
      this.getList.fCompanyid = data.fCompanyid;
      this.getDataList(this.getList);
    },
    handleClick(row, num) {
      this.fId = row.F_Id;
      this.printFile(num);
    },

    // 点击报告编码
    openDialog(row) {
      this.equipmentDetailId = row.fId;
      this.edit(1);
    },
    handleSelect(key) {
      this.activeIndex = key;
    },
  },
};
</script>

<style scoped>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.pageFlagText {
  color: #171a1d;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #000;
}
</style>